<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<title>betterScroll</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/bscroll.js?v=3" ></script>
<style type="text/css">
html , body{width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}
.box1{display:block;width:100%;height:200px;position:relative;margin:0px;padding:0px;overflow:hidden;background:#CCC;}
.in_box1{width:100%;height:auto;position:absolute;top:0px;left:0px;overflow:hidden;}

</style>
</head>

<body>
<div class="box1" id="box1">
	<div class="in_box1">
    	NPM

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save
接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'
如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')
script 加载

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save
接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'
如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')
script 加载

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save
接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'
如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')
script 加载

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save
接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'
如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')
script 加载

<a href="：https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js" class="alink1">better-scroll</a> 也支持直接用 script 加载的方式，加载后会在 window 上挂载一个 BScroll 的对象。

你可以直接用：https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js 这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。

官网：https://ustbhuangyi.github.io/better-scroll/#/examples/en
使用api：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api.html#scrolltoelementel-time-offsetx-offsety-easing 
    </div>
</div>
<input type="button" value="刷新" id="refreshbtn" />
<input type="button" value="滚动到" id="scrollto" />
<input type="button" value="滚动到指定元素a链接" id="scrolltoele" />
<input type="button" value="重新resize尺寸" id="scrollresize" />

<script type="text/javascript">

var scrollo = new BScroll('.box1',{
    scrollY: true,
    scrollbar: {
	 fade: false,
	 interactive: false // 1.8.0 新增
	},
	click: true,/*允许点击事件*/
	startY:-20, /*滚动的起始位置*/
	bounce:true, /*回弹动画*/
	pullUpLoad:{
		threshold:-10 /*在上拉到超过底部 20px 时，触发 pullingUp 事件*/
		}
})

scrollo.on("pullingUp" , function (){ // 监测 滚动到底部是向上拉动事件
	console.log("pullingUp");//上拉新增元素可以使用
	})

scrollo.on("scrollEnd" , function (obj){ // 滚动结束事件
	console.log("scrollEnd:"+obj.y);
	})

scrollo.on("touchEnd" , function (obj){ // 滚动结束事件
	console.log("touchEnd:"+obj.y);
	})

/*setTimeout(function (){
	$("#box1").fadeIn(500);
	},500)*/
document.getElementById("refreshbtn").onclick=function (){
	scrollo.refresh();
	console.log("refresh")
	}

document.getElementById("scrollto").onclick=function (){
	scrollo.scrollTo(0, -150, 500);
	
	}
	
document.getElementById("scrolltoele").onclick=function(){
	scrollo.scrollToElement(document.querySelector(".alink1") , 500)
	
	}
	
document.getElementById("scrollresize").onclick=function(){
	
	$("#box1").css({height:250});
	scrollo.refresh();
	
	}	
	
		
/*document.getElementById("box1").addEventListener("scrollEnd" , function (){
	alert(1)
	})*/

</script>
</body>
</html>
